import React from 'react';
import { ChromePicker } from 'react-color'

export default class view extends React.Component {
    static propTypes = {
        name: React.PropTypes.string,
        color: React.PropTypes.any,
        onChange: React.PropTypes.func,
    };

    static defaultProps = {
        displayColorPicker: true,
        color:'#fff'
    }

    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            color: props.color,
            displayColorPicker: props.displayColorPicker
        };
    }
    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    componentWillReceiveProps({color}) {
        this.setState({
            color
        })
    }

    render() {
        let displayStyle = {
            display: this.state.displayColorPicker ? 'block' : 'none'
        }
        let color = this.state.color;
            color = Array.isArray(color) ? {r:  color[0], g: color[1], b: color[2], a: color[3] } : color;
        return (
            <div className="orin-sw-recolorpicker-root" style={displayStyle} >
                <div className="orin-sw-recolorpicker-wrapper">
                    <ChromePicker
                        width="100%"
                        color={color}
                        onChange={ (data) => { this.props.onChange && this.props.onChange(data)} }/>
                </div>
            </div>
        );
    }
}
